<template>
  <div class="activity-detail">
    <!-- 全局加载指示器 -->
    <div class="global-loading-wrapper" v-if="loading">
      <div class="global-loading-container">
        <el-progress type="circle" :percentage="Math.floor(loadingPercentage)" :width="80"></el-progress>
        <p class="loading-text">加载中，请稍候...</p>
      </div>
    </div>

    <!-- 活动基本信息区域 -->
    <div class="activity-header">
     

      <div class="activity-info">
        <div class="activity-status" :class="activityStatus">
          {{ getStatusText(activityStatus) }}
        </div>
        <h1>{{ activityInfo.title }}</h1>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="activity-content">
      <el-row :gutter="20">
        <!-- 左侧详细信息 -->
        <el-col :span="16">
          <div class="content-card">
            <div class="card-header">
              <h2>活动详情</h2>
            </div>
            <div class="detail-content">
              <!-- 活动基本信息 -->
              <div class="detail-section">
                <h3>基本信息</h3>
                <div class="basic-info">
                  <div class="info-item">
                    <i class="el-icon-date"></i>
                    <span>开始时间：{{ formatDateTime(activityInfo.beginData) }}</span>
                  </div>
                  <div class="info-item">
                    <i class="el-icon-time"></i>
                    <span>持续时间：{{ formatDuration(activityInfo.duration) }}</span>
                  </div>
                  <div class="info-item">
                    <i class="el-icon-location"></i>
                    <span>活动地点：{{ activityInfo.location }}</span>
                  </div>
                  <div class="info-item">
                    <i class="el-icon-user"></i>
                    <span>负责人： {{ activityInfo.organizer }}</span>
                  </div>
                  <!-- <div class="info-item">
                    <i class="el-icon-office-building"></i>
                    <span>承办社团：{{ activityInfo.club }}</span>
                  </div> -->
                  <div class="info-item">
                    <i class="el-icon-tickets"></i>
                    <span>报名人数：{{ activityInfo.currentParticipants }}/{{ activityInfo.maxParticipants }}</span>
                  </div>
                </div>
              </div>

              <!-- 活动介绍 -->
              <div class="detail-section">
                <h3>活动介绍</h3>
                <div class="rich-text" v-html="activityInfo.description"></div>
              </div>

              <!-- 注意事项 -->
              <!-- <div class="detail-section">
                <h3>注意事项</h3>
                <ul class="notice-list">
                  <li v-for="(notice, index) in activityInfo.notices" :key="index">
                    {{ notice }}
                  </li>
                </ul>
              </div> -->

              <!-- 参与者列表 -->
              <div class="detail-section">
                <h3>参与者（{{ activityInfo.participants.length }}人）</h3>
                <div class="participants-grid">
                  <div v-for="participant in activityInfo.participants"
                       :key="participant.id"
                       class="participant-card">
                    <el-avatar :size="50" :src="participant.avatar">
                      {{ participant.nickname.substring(0, 1) }}
                    </el-avatar>
                    <div class="participant-info">
                      <div class="participant-name">{{ participant.nickname }}</div>
                      <div class="participant-meta">{{ participant.phone }}</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="detail-section">
                <div style="display: flex; align-items: center; margin-bottom: 20px; justify-content: space-between;">
                  <h3 style="margin: 0;">活动消费</h3>
                  <el-button 
                    type="primary" 
                    size="small" 
                    v-if="permissionList[0].flag && !isActivityEnded && ! isActivityEnded"
                    @click="handleAddConsumption">
                    添加消费项
                  </el-button>
                </div>
                
                  <el-table
                    :data="consumptionList"
                    style="width: 100%;">
                      <el-table-column
                        prop="title"
                        label="消费项目"
                        >
                      </el-table-column>
                      <el-table-column
                        prop="amount"
                        label="金额"
                        >
                        <template slot-scope="scope">
                          {{ scope.row.amount }}元
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="tags"
                        label="标签">
                        <template slot-scope="scope">
                          <el-tag :type="getConsumptionStatusStyle(scope.row.stat)" >
                            {{  getConsumptionStatusText(scope.row.stat) }}
                          </el-tag>
                          
                        </template>
                      </el-table-column>
                  </el-table>
              </div>
            </div>
          </div>
        </el-col>

        <!-- 添加消费项对话框 -->
  <el-dialog
    title="添加消费项"
    :visible.sync="consumptionDialogVisible"
    width="500px">
    <el-form 
      ref="consumptionForm" 
      :model="consumptionForm" 
      :rules="consumptionRules" 
      label-width="100px">
      <el-form-item label="项目名称" prop="title">
        <el-input v-model="consumptionForm.title" placeholder="请输入消费项目名称"></el-input>
      </el-form-item>
      <el-form-item label="申请金额" prop="amount">
          <el-input-number
            v-model="consumptionForm.amount"
            :min="0"
            max="100"
            style="width: 200px">
          </el-input-number>
          <!-- <span class="amount-hint">最大可申请: {{ formatCurrency(this.surplus) }}</span> -->
        </el-form-item>
      <el-form-item label="消费类型" prop="tags">
        <el-select v-model="consumptionForm.tags" placeholder="请选择消费类型" style="width: 100%">
          <el-option 
            v-for="(item) in fundTypes" 
            :key="item.value" 
            :label="item.name" 
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="消费说明" prop="description">
        <el-input 
          type="textarea" 
          v-model="consumptionForm.description" 
          placeholder="请输入消费说明"
          :rows="3">
        </el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="consumptionDialogVisible = false">取 消</el-button>
      <el-button 
        type="primary" 
        @click="submitConsumption" 
        :loading="submittingConsumption">
        确 定
      </el-button>
    </span>
  </el-dialog>

        
        

        <!-- 右侧报名按钮 -->
        <el-col :span="8">
          <div class="content-card signup-card" v-if="!isRegistered">
            <div class="signup-action">
              <el-button
                type="primary"
                class="signup-button"
                :loading="submitting"
                :disabled="!canSignup"
                @click="handleSignup">
                {{ signupButtonText }}
              </el-button>
              <p class="signup-tip" v-if="activityInfo.currentParticipants >= activityInfo.maxParticipants">
                <i class="el-icon-warning-outline"></i> 活动名额已满
              </p>
              <p class="signup-count">
                已报名 {{ activityInfo.currentParticipants }}/{{ activityInfo.maxParticipants }} 人
              </p>
            </div>
          </div>
          <div class="content-card signup-card registered-card" v-else>
            <div class="success-info">
              <i class="el-icon-circle-check"></i>
              <p>报名成功！</p>
              <div class="qrcode-section" v-if="activityInfo.groupQRCode">
                <p>请扫码加入活动群</p>
                <img :src="activityInfo.groupQRCode" alt="活动群二维码">
              </div>
            </div>
          </div>
        </el-col>
      </el-row>

      
    </div>
  </div>
</template>

<script>
import { checkPermission } from '@/utils/filters'
import httpInstance from '@/utils/http'
import { statusConfig } from '@/utils/status'
import { formater } from '@/utils/formater'
export default {
  name: 'ActivityDetailView',
  data() {
    return {
      fundTypes:[],

      consumptionDialogVisible:false,
      consumptionForm: {
        activityId: '',
        clubId: '',
        title: '',
        amount: 0,
        tags: '',
        stat:1,
        description:''
      },
      // 消费列表
      consumptionList: [
        { id: 1, actibityId: null, title: '购买电脑2台', amount: 10000, tags: 4 },
        { id: 2, actibityId: null, title: '路费', amount: 500, tags: 4 },
        { id: 3, actibityId: null, title: '住宿费', amount: 30000, tags: 4 },
      ],

      permissionList: [
        {name:'财务管理', value: 'finance', flag: false},
      ],
      activityId: this.$route.params.id,
      activityInfo: {
        title: '',
        status: 'upcoming',
        poster: '', // 活动海报
        startTime: '',
        location: '',
        organizer: '',
        club: '',
        currentParticipants: 0,
        maxParticipants: 0,
        description: '',
        notices: [],
        participants: [], // 参与者列表
        groupQRCode: ''
      },
      submitting: false,
      isRegistered: false,
      currentUser: JSON.parse(localStorage.getItem('user') || '{}'), // 获取当前登录用户
      // 添加假数据用于演示
      mockParticipants: [],
      loading: true, // 确保初始状态是加载中
      loadingPercentage: 0,
      loadingTimer: null
    }
  },
  computed: {
    canSignup() {
      // 检查是否登录
      if (!this.currentUser || !this.currentUser.id) {
        return false
      }

      // 检查活动是否还有名额和未结束
      return this.activityInfo.currentParticipants < this.activityInfo.maxParticipants
        && this.activityStatus !== 'ended'
    },
    signupButtonText() {
      if (!this.currentUser || !this.currentUser.id) {
        return '请先登录'
      }

      if (this.activityStatus === 'ended') {
        return '活动已结束'
      }

      if (this.activityInfo.currentParticipants >= this.activityInfo.maxParticipants) {
        return '名额已满'
      }

      return '立即报名'
    },
    activityStatus() {
      if (!this.activityInfo.beginData) return 'upcoming';

      const now = new Date();
      const activityStart = new Date(this.activityInfo.beginData);
      
      // Calculate end time by adding duration (in minutes)
      const activityEnd = new Date(activityStart.getTime() + (this.activityInfo.duration || 0) * 60 * 1000);
      
      const timeDiff = activityStart.getTime() - now.getTime();
      const hoursDiff = timeDiff / (1000 * 60 * 60); // Convert to hours

      if (now > activityEnd) {
        return 'ended'; // Activity has ended
      } else if (now >= activityStart && now <= activityEnd) {
        return 'ongoing'; // Activity is in progress
      } else if (hoursDiff <= 24) {
        return 'ongoing'; // Activity starts within 24 hours, show as "upcoming soon"
      } else {
        return 'upcoming'; // Activity hasn't started yet
      }
    },
    // 添加计算属性判断活动是否结束
    isActivityEnded() {
      if (!this.activityInfo || !this.activityInfo.endTime) return false;
      return new Date(this.activityInfo.endTime) < new Date();
    }
  },
  methods: {
    // 获取消费的状态
    getConsumptionStatusText(status) {
      return statusConfig.getConsumptionStatusText(status)
    },
    getConsumptionStatusStyle(status) {
      return statusConfig.getConsumptionStatusStyle(status)
    },

    // 查询当前活动的消费项列表
    async fetchConsumptionList() {
      try {
        const res = await httpInstance.post(`/api/consumption/listByActivityId/${this.activityId}`)

        if (res.code === 200) {
          this.consumptionList = res.data
        } else {
          this.$message.error(res.message || '获取消费项列表失败')
        }
      } catch (err) {
        console.error('获取消费项列表失败:', err)
        this.$message.error('获取消费项列表失败，请稍后重试')
      }
      


    },

    // 提交消费项表单
    async submitConsumption() {
      try {
        this.submittingConsumption = true
        // 提交消费项数据
        const res = await httpInstance.post('/api/consumption/add', this.consumptionForm)
        if (res.code === 200) {
          this.$message.success('消费项添加成功')
          this.consumptionList.push(this.consumptionForm)
          this.consumptionDialogVisible = false

          // 刷新消费列表
          await this.fetchActivityDetail()
        } else {
          this.$message.error(res.message || '添加消费项失败')
        }
      } catch (err) {
        console.error('添加消费项失败:', err)
        this.$message.error('添加消费项失败，请稍后重试')
      } finally {
        this.submittingConsumption = false
      }
    },
    // 表单验证规则
    consumptionRules: {
      title: [
        { required: true, message: '请输入消费项目名称', trigger: 'blur' }
      ],
      amount: [
        { required: true, message: '请输入消费金额', trigger: 'blur' },
        { type: 'number', min: 0, message: '金额必须大于0', trigger: 'blur' }
      ],
      tags: [
        { required: true, message: '请选择消费类型', trigger: 'change' }
      ],
      description: [
        { required: true, message: '请输入消费说明', trigger: 'blur' }
      ]
    },


    // 打开添加消费项对话框
    handleAddConsumption() {
          this.consumptionForm = {
            activityId: this.activityId,
            clubId: this.activityInfo.clubId,
            amount: 0,
            tags: '',
            description: '',
            title: ''
          };
          this.consumptionDialogVisible = true;
        },
    
    // 检查当前用户是否有管理财务的权力


    // 启动加载动画
    startLoadingAnimation() {
      this.loadingPercentage = 0
      // 创建一个平滑增加进度的动画效果
      this.loadingTimer = setInterval(() => {
        if (this.loadingPercentage < 90) {
          // 只自动增加到90%，剩余10%留给真正的数据加载完成
          this.loadingPercentage += Math.random() * 3
          if (this.loadingPercentage > 90) {
            this.loadingPercentage = 90
          }
          // 确保loadingPercentage为整数
          this.loadingPercentage = Math.floor(this.loadingPercentage)
        }
      }, 200)
    },

    // 停止加载动画
    stopLoadingAnimation() {
      if (this.loadingTimer) {
        clearInterval(this.loadingTimer)
        this.loadingTimer = null
      }
      // 设置加载完成
      this.loadingPercentage = 100
      // 延迟关闭加载指示器，提供更好的视觉体验
      setTimeout(() => {
        this.loading = false
      }, 500)
    },

    getStatusText(status) {
      const statusMap = {
        upcoming: '未开始',
        ongoing: '即将开始',
        ended: '已结束'
      }
      return statusMap[status] || '未知状态'
    },
    // 获取活动详情
    async fetchActivityDetail() {
      try {
        const res = await httpInstance.get(`/api/activity/${this.activityId}`)
        if (res.code === 200) {
          const data = res.data
          console.log("获取活动详情",res)

          // 如果接口返回的参与者列表为空，使用假数据
          let participants = Array.isArray(data.participants) && data.participants.length > 0
            ? data.participants
            : this.mockParticipants;

          this.activityInfo = {
            ...this.activityInfo,
            ...data,
            startTime: this.formatDateTime(data.startTime),
            notices: Array.isArray(data.notices) ? data.notices : [],
            participants: participants,
            // 更新已报名人数
            currentParticipants: participants.length
          }
          this.loadingPercentage = 85
        } else {
          this.$message.error(res.message || '获取活动详情失败')
          // 使用假数据代替
          this.activityInfo.participants = this.mockParticipants;
          this.activityInfo.currentParticipants = this.mockParticipants.length;
        }
      } catch (err) {
        console.error('获取活动详情失败:', err)
        this.$message.error('获取活动详情失败')
        // 使用假数据代替
        this.activityInfo.participants = this.mockParticipants;
        this.activityInfo.currentParticipants = this.mockParticipants.length;
      }
    },
    formatDateTime(dateStr) {
      if (!dateStr) return ''
      const date = new Date(dateStr)
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const hours = String(date.getHours()).padStart(2, '0')
      const minutes = String(date.getMinutes()).padStart(2, '0')

      // 获取星期几
      const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
      const weekday = weekdays[date.getDay()]

      // 判断是上午还是下午
      const period = hours >= 12 ? '下午' : '上午'
      const displayHours = hours > 12 ? String(hours - 12).padStart(2, '0') : hours

      return `${year}年${month}月${day}日 ${weekday} ${period}${displayHours}:${minutes}`
    },
    formatDuration(minutes) {
      if (!minutes && minutes !== 0) return '未知时长';
      
      const hours = Math.floor(minutes / 60);
      const mins = minutes % 60;
      
      if (hours > 0 && mins > 0) {
        return `${hours}小时${mins}分钟`;
      } else if (hours > 0) {
        return `${hours}小时`;
      } else {
        return `${mins}分钟`;
      }
    },
    async checkRegistrationStatus() {
      try {
        // 先使用新API检查用户是否已参加活动
        const participateRes = await httpInstance.get(`/api/activity/isParticipate/${this.activityId}`)
        if (participateRes.code === 200) {
          this.isRegistered = participateRes.data
          if (this.isRegistered) {
            this.$message.info('您已报名参加此活动')
            return
          }
        }

        // 如果新API不可用，回退到原有的检查方法
        const res = await httpInstance.get(`/api/activity/registration/status/${this.activityId}`)
        if (res.code === 200) {
          this.isRegistered = res.data.registered
        }
      } catch (err) {
        console.error('检查报名状态失败:', err)
        // 如果API调用失败，默认为未报名
        this.isRegistered = false
      }
    },
    // 报名方法
    async handleSignup() {
      if (!this.canSignup) return

      try {
        this.submitting = true
        // 使用与检查API一致的路径
        const res = await httpInstance.post(`/api/activity/participate/${this.activityId}`)
        if (res.code === 200) {
          this.$message.success('报名成功')
          this.isRegistered = true

          // 只获取参与者列表而不刷新整个页面
          await this.fetchActivityParticipants()

          // 更新当前参与人数
          this.activityInfo.currentParticipants = this.activityInfo.participants.length
        } else {
          this.$message.error(res.message || '报名失败')
        }
      } catch (err) {
        console.error('报名失败:', err)
        this.$message.error('报名失败，请稍后重试')
      } finally {
        this.submitting = false
      }
    },
    // 获取活动参与者信息
    async fetchActivityParticipants() {
      try {
        const res = await httpInstance.get(`/api/activity/users/${this.activityId}`)
        if (res.code === 200 && res.data != null) {
          // 更新参与者列表和当前参与人数
          this.activityInfo.participants = res.data
          this.activityInfo.currentParticipants = res.data.length
        } else {
          this.$message.warning(res.msg || '获取参与者信息失败')
        }
      } catch (err) {
        console.error('获取参与者信息失败:', err)
        this.$message.error('获取参与者信息失败')
      }
    },
  },
  async created() {
    // 先确保loading状态为true且启动加载动画
    this.loading = true
    this.startLoadingAnimation()

    // 获取活动ID
    this.activityId = this.$route.params.id

    try {
      // 首先检查用户报名状态，然后再获取其他数据
      await this.checkRegistrationStatus()
      this.loadingPercentage = 40

      await Promise.all([
        this.fetchActivityDetail(),
        this.fetchActivityParticipants() // 添加获取参与者信息
        
      ])
      // 记载用户的所有权限
      for (let i = 0; i < this.permissionList.length; i++) {
        this.permissionList[i].flag = await checkPermission(this.currentUser.id, this.activityInfo.clubId, this.permissionList[i].value)
      }
    } catch (error) {
      console.error('加载活动详情失败:', error)
      this.$message.error('加载活动详情失败，请稍后重试')
    } finally {
      // 无论成功失败，最终停止加载动画
      this.stopLoadingAnimation()
    }
    // 获取资金类型
    // 获取资金类型列表
    const res = await httpInstance.post('/api/sys/fundTypes')
   if(res.code === 200) {
     this.fundTypes = res.data
   }
    // 获取消费项泪飙
    this.fetchConsumptionList()


  },

  watch: {
    '$route.params.id': {
      handler(newId, oldId) {
        // 只有在路由参数改变且不是首次加载时才执行
        // 首次加载在created中已处理
        if (newId && newId !== oldId && oldId !== undefined) {
          this.activityId = newId
          // 启动加载动画
          this.loading = true
          this.startLoadingAnimation()

          try {
            // 先检查报名状态，然后再获取其他数据
            this.checkRegistrationStatus().then(() => {
              this.loadingPercentage = 40
              Promise.all([
                this.fetchActivityDetail(),
                this.fetchActivityParticipants() // 添加获取参与者信息
              ]).then(() => {
                // 加载完成，停止动画
                this.stopLoadingAnimation()
              }).catch(error => {
                console.error('加载活动详情失败:', error)
                this.$message.error('加载活动详情失败，请稍后重试')
                this.stopLoadingAnimation()
              })
            })
          } catch (error) {
            console.error('检查报名状态失败:', error)
            this.stopLoadingAnimation()
          }
        }
      },
      immediate: true
    },

    // 监听用户登录状态变化
    currentUser: {
      handler() {
        // 用户状态变化时重新检查报名状态
        if (this.activityId) {
          this.checkRegistrationStatus()
        }
      },
      deep: true
    }
  },
  
  beforeDestroy() {
    // 确保在组件销毁前清除定时器
    this.stopLoadingAnimation()
  }
}
</script>

<style scoped>
/* 全局加载样式 */
.global-loading-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.9);
  z-index: 9999;
  backdrop-filter: blur(5px);
}

.global-loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
  animation: float 2s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

.loading-text {
  margin-top: 15px;
  font-size: 16px;
  color: #409EFF;
  font-weight: 500;
}

.activity-detail {
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
}

.activity-header {
  background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
  position: relative;
}

.activity-cover {
  height: 300px;
  overflow: hidden;
  position: relative;
}

.activity-cover .el-image {
  width: 100%;
  height: 100%;
  transition: all 0.5s ease;
}

.activity-info {
  padding: 30px;
  position: relative;
  color: #fff;
}

.activity-status {
  position: absolute;
  top: 20px;
  right: 30px;
  padding: 6px 20px;
  border-radius: 30px;
  color: white;
  font-size: 14px;
  font-weight: 500;
  backdrop-filter: blur(10px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  z-index: 10;
  transition: all 0.3s ease;
}

.activity-status.upcoming {
  background: rgba(24, 144, 255, 0.8);
}

.activity-status.ongoing {
  background: rgba(82, 196, 26, 0.8);
}

.activity-status.ended {
  background: rgba(144, 147, 153, 0.8);
}

.activity-info h1 {
  margin: 0 0 30px 0;
  font-size: 32px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.activity-content {
  padding: 0;
}

.content-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  margin-bottom: 30px;
  transition: all 0.3s ease;
  overflow: hidden;
  border: 1px solid rgba(230, 235, 245, 0.8);
}

.content-card:hover {
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.card-header {
  padding: 20px 25px;
  border-bottom: 1px solid rgba(230, 235, 245, 0.8);
  background: #f9fafb;
}

.card-header h2 {
  margin: 0;
  font-size: 20px;
  color: #333;
  font-weight: 600;
  display: flex;
  align-items: center;
}

.card-header h2:before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 20px;
  background: linear-gradient(to bottom, #4b6cb7, #182848);
  margin-right: 12px;
  border-radius: 2px;
}

.detail-content {
  padding: 30px;
}

.detail-section {
  margin-bottom: 40px;
}

.detail-section:last-child {
  margin-bottom: 0;
}

.detail-section h3 {
  margin: 0 0 20px 0;
  font-size: 18px;
  color: #333;
  font-weight: 600;
  display: flex;
  align-items: center;
}

.detail-section h3:before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 16px;
  background: #4b6cb7;
  margin-right: 10px;
  border-radius: 2px;
}

.rich-text {
  line-height: 1.8;
  color: #555;
  font-size: 15px;
}

.notice-list {
  padding-left: 20px;
  margin: 0;
}

.notice-list li {
  margin-bottom: 8px;
  color: #555;
  line-height: 1.6;
}

.notice-list li:last-child {
  margin-bottom: 0;
}

.participants-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.participant-card {
  display: flex;
  align-items: center;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 10px;
  transition: all 0.3s ease;
  border: 1px solid rgba(230, 235, 245, 0.8);
}

.participant-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(75, 108, 183, 0.1);
  background: white;
}

.participant-info {
  margin-left: 15px;
  flex: 1;
}

.participant-name {
  font-weight: 600;
  color: #333;
  margin-bottom: 5px;
  font-size: 15px;
}

.participant-meta {
  font-size: 13px;
  color: #777;
}

.signup-card {
  position: sticky;
  top: 30px;
  padding: 30px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}

.signup-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
}

.signup-button {
  width: 100%;
  height: 50px;
  font-size: 16px;
  font-weight: 500;
  background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
  border: none;
  border-radius: 25px;
  box-shadow: 0 10px 25px rgba(75, 108, 183, 0.3);
  transition: all 0.3s ease;
}

.signup-button:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(75, 108, 183, 0.4);
}

.signup-button:disabled {
  background: linear-gradient(135deg, #9aa8cc 0%, #5c698f 100%);
  opacity: 0.7;
}

.signup-tip {
  color: #f56c6c;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.signup-tip i {
  margin-right: 5px;
  font-size: 16px;
}

.signup-count {
  color: #666;
  margin: 0;
  font-size: 14px;
  position: relative;
  padding-top: 15px;
}

.signup-count:before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 1px;
  background: #eee;
}

.registered-card {
  text-align: center;
  padding: 40px 30px;
}

.success-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.success-info i {
  font-size: 60px;
  color: #52c41a;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.success-info p {
  font-size: 20px;
  color: #333;
  margin: 0;
  font-weight: 600;
}

.qrcode-section {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid #f0f2f5;
  width: 100%;
}

.qrcode-section p {
  font-size: 16px;
  color: #666;
  margin-bottom: 20px;
}

.qrcode-section img {
  width: 200px;
  height: 200px;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 10px;
  background: white;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

@media screen and (max-width: 768px) {
  .activity-info h1 {
    font-size: 24px;
    margin-bottom: 20px;
  }

  .participant-card {
    padding: 12px;
  }

  .participants-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 15px;
  }

  .signup-card {
    position: static;
    margin-top: 20px;
  }
}

/* 添加基本信息样式 */
.basic-info {
  margin-bottom: 30px;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding: 12px 15px;
  background: #f8f9fa;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.info-item:hover {
  background: #f0f2f5;
  transform: translateX(5px);
}

.info-item i {
  font-size: 18px;
  color: #4b6cb7;
  margin-right: 15px;
}

.info-item span {
  font-size: 15px;
  color: #333;
}
</style>
